<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>密码键盘</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../../../../assets/css/reset.css"/>

    <link rel="stylesheet" href="../../../../assets/css/examples.css"/>
<style type="text/css">
.keyboard-wrap{
    position:relative;
    display:inline-block;
    width:200px;
    height:30px;
    padding:0px;
}
.keyboard-wrap-layer{
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%;
    background-color: #FFFFFF; 
    opacity: 0;
}
.keyboard-text-wrap{
    position: absolute; 
    left: 0; 
    top: 0;
}
.keyboard-text {
    position: relative; 
    display:inline-block;
    height: 26px;
    line-height: 26px;
    overflow: hidden;
}
.keyboard-cursor {
    position: relative;
    top:0;
    height: 26px;
    display: inline-block;
    width: 1px;
    overflow: hidden;   
    -webkit-animation: keyboard-cursor 1.1s infinite steps(1, start);
            animation: keyboard-cursor 1.1s infinite steps(1, start);
}
@keyframes keyboard-cursor {
        0%, 100% {
            background-color: #000;
            color: #aaa;
        }
        50% {
            background-color: #fff; 
            color: #000;
        }
}
@-webkit-keyframes keyboard-cursor {
    0%, 100% {
        background-color: #000;
        color: #aaa;
    }
    50% {
        background-color: #fff;
        color: #000;
    }
}
</style>
</head>
<body>
<h1>
    密码键盘（Keyboard）
</h1>
  <input type="text" id="testpwd" value="">
   <input type="text" id="testpwd11" value="">
<div>
    <input id ="pwd" type="password" vaule="assss" style="display:inline;width:auto;height:auto;" /> 
</div>
<div>
<input id ="pwd11" type="password" vaule="assss" /> 
</div>
<p><a href="javascript:void(0)" id="call">call keyboard</a></p>
<!-- <span class="keyboard-cursor">&nbsp;</span> -->

<script  src="../../../../../core/$$.js"></script>
<script  src="../../../../../core/libs/zepto/zepto.min.js"></script>
<script  src="../../../../../core/libs/zepto/selector.js"></script>
<script  src="../../../../../core/libs/zepto/touch.js"></script>
<script  src="../../../../../core/libs/underscore-min.js"></script>
<script  src="../../../../../core/libs/oop.js"></script>
<script  src="../../../../../core/extend/prototype.js"></script>
<script  src="../../../../../core/extend/function.js"></script>
<script  src="../../../../../core/native/platformAdapter.js"></script>
<script  src="../../../../../core/native/api.js"></script>
<script  src="../../../../../core/native/eventListener.js"></script>
<script  src="../../../classes/XX.js"></script>
<script  src="../../../../config/url/dev.js"></script>

<script type="text/javascript">
    $('#call').on('tap', function () {
        $$.Native.keyboard({
            keyPressCallback: function (number) {
                $('#number').text(number);
            },
            completeCallback: function (password) {
                $('#password').text(password);
            }
        });
    });

// $$.Native.Keyboard = function(options){

// };
$$.Native.keyboard.keyPressCallback = function(obj){
    var objId = obj.attr("id");
    var character = "\u2022";
    $("#test"+objId).on("input",function(value){
        $(".keyboard-text"+objId).html($(this).val().replace(/./g,character));
        obj.val($(this).val());
        //self.keyFocus($(this).val());
    });
}


    var Keyboard = function(options){
        this.id = options.id;
        this.keyFocusCallback = options.focusCallback || function(){};
        this.onKeyPress = options.onKeyPress || function(){};
        this.onKeyComplete = options.onKeyComplete || function(){};
        this.init();
    }
    Keyboard.prototype = {
        init: function(){
            var self = this;
            self.createWrap();
            self.keyBlur();
            self.createKeyboard();
        },
        createWrap: function(){
            var self = this,
            obj=this.id,
            objId = obj.attr("id"),
            objWrap = obj.parent();
            if(!objWrap.hasClass(".keyboard-wrap")){
                obj.wrap('<div class="keyboard-wrap"></div>');
                obj.attr("type","hidden");
                obj.after('<div class="keyboard-wrap-layer keyboard-wrap-layer'+objId+'" data-id="'+objId+'" style=""></div>');
                obj.after('<div class="Keyboard-text-wrap"><span class="keyboard-text keyboard-text'+objId+'"></span><span class="keyboard-cursor keyboard-cursor'+objId+'" data-id="'+obj.attr("id")+'" style="display:none">&nbsp;</span></div>');
            }
        },
        createKeyboard: function(){
            var self = this,
            obj=this.id,
            objId = obj.attr("id");
            self.keyFocus();
            options = {
                defaultValue: self.id.val(),
                keyPressCallback: self.keyPress,
                completeCallback: self.keyComplete
            }
            $$.Native.keyboard.keyPressCallback(obj);
            self.keyFocus($(this).val());
           
        },
        keyComplete: function(){
            self.onKeyComplete();
        },
        keyFocus : function(value){
            var self = this,
            obj = this.id,
            objid = obj.attr("id");
            $(".keyboard-wrap-layer"+obj.attr("id")).trigger("tap");
            self.keyFocusCallback(value);
        },
        keyBlur: function(){
            var self = this,
            obj = this.id;
            $('body').off('tap.keyboard');
            $('body').on("tap.keyboard",function(e){
                var target = e.srcElement || e.target;
                if(!$(target).hasClass("keyboard-wrap-layer")){
                    $(".keyboard-cursor").hide();
                }
            });
        }
    };
    
    function createPwd(options){
        var obj =options.obj,
        onKeyPress = options.onKeyPress,
        onKeyComplete = options.onKeyComplete;
        if(true){
            if(typeof obj == "object"){
                var keyId = "keyboard"+obj.id;
                var keyboard = new Keyboard({
                    id : obj,
                    focusCallback : function(value){
                        var objId =  obj.attr("id");
                        $("body").delegate(".keyboard-wrap-layer" + objId,"tap",function(){
                            $(".keyboard-cursor").hide();
                            if($(this).data("id") == objId){
                                $(".keyboard-cursor"+objId).show();
                            }
                        });
                        onKeyPress(value);
                    },
                    onKeyPress : function(){
                        onKeyPress();
                    },
                    onKeyComplete : function(){
                        onKeyComplete();
                    }
                });
            }
        }else{
            var ops = {
                defaultValue: self.id.val(),
                keyPressCallback: function(){
                    keyPress();
                },
                completeCallback: function(){
                    keyComplete();
                }
            }
            $$.Native.Keyboard(ops);
        }
    }
    
createPwd({
    obj:$("#pwd"),
    onKeyPress: function(value){
       
    },
    onKeyComplete:function(value){

    }
});
// createPwd({
//     obj:$("#pwd11")
// });
    
 

    // function createPwd(obj,callback){
    //     var flag = true;
    //     if(flag){
    //         var objWrap = obj.parent();
    //         if(!objWrap.hasClass(".keyboard-wrap")){
    //             obj.wrap("<span style='padding:3px;position:relative;display:inline-block'></span>");
    //             obj.after('<span class="keyboard-wrap-layer'+obj.attr("id")+'" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%;background-color: #FFFFFF; opacity: 0; border:1px solid #f00;"></span>');
    //         }
    //         $("body").tap(function(){
    //             $("span.keyboard-cursor").remove();
    //         })
    //         $("body").on("tap",".keyboard-wrap-layer"+obj.attr("id"),function(){
    //             obj.after('<span class="keyboard-cursor">&nbsp;</span>');
    //             callback(obj);
    //         });
    //     }else{
    //         callback(obj);
    //     }        
    // }

    // createPwd($("#pwd"),function(obj){     
    //     var options = {
    //         defaultValue: obj.val(),
    //         keyPressCallback: function (value) {
    //             obj.val(value);
    //         },
    //         completeCallback: function () {
    //         }
    //     };
    //     $$.Native.keyboard(options);
    // });

    //   createPwd($("#pwd11"),function(obj){         
    //     var options = {
    //         defaultValue: obj.val(),
    //         keyPressCallback: function (value) {
    //             obj.val(value);
    //         },
    //         completeCallback: function () {
    //         }
    //     };
    //     $$.Native.keyboard(options);

    // });
    
    
</script>
</body>
</html>